import { initLoading } from "web-loading";

export const showWebLoading = () => {
    // 创建一个固定在视口中的容器
    const loadingContainer = document.createElement('div');
    loadingContainer.style.position = 'fixed';
    loadingContainer.style.top = '0';
    loadingContainer.style.left = '0';
    loadingContainer.style.width = '100vw';
    loadingContainer.style.height = '100vh';
    loadingContainer.style.display = 'flex';
    loadingContainer.style.justifyContent = 'center';
    loadingContainer.style.backdropFilter = 'blur(3px)'
    loadingContainer.style.alignItems = 'center';
    loadingContainer.style.zIndex = '2000'; // 确保在顶层

    document.body.appendChild(loadingContainer);

    let webLoading = initLoading({
        "type": "dom",
        "model": "Bean",
        "text": "好累啊...",
        "textGap": 7,
        "fontSize": 17,
        "fontFamily": "Microsoft YaHei",
        "delay": 64,
        "delayInto": 65,
        "notFeel": 0,
        "zIndex": "2001",
        "themeColor": "rgb(154, 236, 129)",
        "bgColor": "transparent",
        "shadowColor": "rgba(209, 212, 215, 0.6)",
        "shadowOffsetX": 2,
        "shadowOffsetY": 2,
        "shadowBlur": 5,
        "pointerEvents": false,
        "optimization": false,
        "beanSize": 11,
        "pointLength": 15
    });

    webLoading.loading(loadingContainer);

    return {
        loadingInstance: webLoading,
        container: loadingContainer
    };
};

export const closeWebLoading = (loadingObj) => {
    loadingObj.loadingInstance.close();
    // 移除容器
    if (loadingObj.container && loadingObj.container.parentNode) {
        loadingObj.container.parentNode.removeChild(loadingObj.container);
    }
};